<template>
  <div class="box1">
    <header class="header">
      <van-nav-bar
        title="详情页"
      
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <main class="contet">
        <div><img :src="detailInfo.image" alt="" style="width:100%;"></div>
        <div>{{detailInfo.title}}</div>
        <div>{{detailInfo.price}}</div>
    </main>
    <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车" @click="addCart"/>
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
  </div>
</template>

<script setup >
import request from "@/utils/request";
import { ref, onMounted } from "vue";
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router =useRouter()
const detailInfo=ref({})
onMounted(()=>{
    //详情页请求
    request.get('/detail',{
        params:{
            id:route.params.id
        }
    }).then((res) => {
      if (res.data.code == 200) {
        detailInfo.value = res.data.data;
      }
    });
})

//如果有token 不登录 没有token 跳转到登录页面
const addCart=()=>{
    if(localStorage.getItem('token')){
        console.log('已登录');
        
    }else{
        router.push('/login')
    }
}
</script>
